/**
 * 站点状态监测
 */
var myChartFirst = echarts.init(document.getElementById('pie-charts-first'));
var circularGraph = {
    tuglie: ''
};
var myChartFirstOpt = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    title: {
        text: '站点状态监测',
        left: 'center',
        textStyle: {
            color: '#FFFFFF'
        }
    },
    series: [
        {
            name:'异常率',
            type: 'pie',
            center: ['50%', '50%'], // 饼图的圆心坐标
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: { //  饼图图形上的文本标签

                normal: { // normal 是图形在默认状态下的样式
                    show: true,
                    position: 'center',
                    color: '#fe7d03',
                    fontSize: 18,
                    fontWeight: 'bold',
                    formatter: '{c}\n异常' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[{
                value: 70,
                name: "超标",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#5148ed'},
                                {offset: 0.5, color: '#8cafff'},
                                {offset: 1, color: '#5148ed'}
                            ]
                        )
                    }
                },
                label: {
                    normal: {
                        show: true
                    }
                }
            },
                {
                    value: 30,
                    name: '正常',
                    itemStyle: {
                        normal: {
                            color: '#f0f3f5'
                        }
                    },
                    label: {
                        normal: {
                            show: false
                        }
                    }
                }
            ]
        }
    ]
};

if(myChartFirstOpt && typeof myChartFirstOpt === 'object') {
    myChartFirst.setOption(myChartFirstOpt)
};
/**
 * 近一周地下监测站监测记录
 */

var myChartsSen = echarts.init(document.getElementById('pie-charts-sen'));

function f() {
    $.ajax({
        url : '${basePath}echars/getzxtEchars',
        data : {
            stationId : stationId,autoId : autoId
        },
        type : "POST",
        success : function(data) {
            kjChart.setOption({
                xAxis: {

                    data:  data.t.shuzu2
                },
                series: data.t.shuzu1
            });
        }
    });
    var myChartsSenOpt = {
        title: {
            text: '近一周地下监测站记录',
            left: 'center',
            textStyle: {
                color: '#FFFFFF'
            }
        },

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },

        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['1-21', '1-22', '1-23', '1-24', '1-25', '1-26', '1-27'],
                axisLine: {
                    lineStyle: {
                        color: '#ffffff',
                        width: 1, //这里是为了突出显示加上的
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#ffffff',
                        width: 1, //这里是为了突出显示加上的
                    }
                },
            }
        ],
        series: [
            {
                name: '温度传感器',
                type: 'line',
                stack: '总量',
                areaStyle: {},

                emphasis: {
                    focus: 'series'
                },
                data: [120, 1132, 101, 134, 920, 230, 210],
                smooth: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,  color: 'rgba(59,182,252,.6)'  // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(225,225,225,.1)' //   0% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                color: 'rgba(59,182,252,1)', //线条颜色
            },
            {
                name: '水文传感器',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [2220, 182, 191, 234, 2903, 3320, 310],
                smooth: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,  color: 'rgba(172,133,236,.6)'  // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(225,225,225,.1)' //   0% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                color: 'rgba(172,133,236,1)', //线条颜色
            },
            {
                name: '风力传感器',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 2322, 201, 2154, 1910, 330, 410],
                smooth: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,  color: 'rgba(251,248,22,.6)'  // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(225,225,225,.1)' //   0% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                color: 'rgba(251,248,22,1)', //线条颜色
            },
            {
                name: '精力传感器',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [3220, 3322, 2301, 334, 390, 330, 3220],
                smooth: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,  color: 'rgba(2,214,152,.6)'  // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(225,225,225,.1)' //   0% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                color: 'rgba(2,214,152,1)', //线条颜色
            }
        ]
    };
}


if (myChartsSenOpt && typeof myChartsSenOpt=== 'object') {
    myChartsSen.setOption(myChartsSenOpt)
};
/**
 * 地下监测站实时监测值
 */

var myChartsThir = echarts.init(document.getElementById('pie-charts-thir'));

var myChartsThirOpt = {
    series: [{
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        center: ['30%','55%'],
        pointer: {
            show: true
        },
        progress: {

            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
                borderWidth: 0,
                borderColor: '#464646'
            }
        },
        axisLine: {

            lineStyle: {
                width: 20
            }
        },
        splitLine: {
            show: false,
            distance: 0,
            length: 10
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false,
            distance: 50
        },
        data: [{
            value: 20,
            name: '温度传感器',
            itemStyle:{
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,  color: 'rgba(59,182,252,1)'  // 100% 处的颜色
                    }, {
                        offset: 1, color: 'rgba(127,214,225,1)' //   0% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            title: {
                offsetCenter: ['180%', '-115%']
            },
            detail: {
                offsetCenter: ['180%', '-88%']
            }
        },
            {
                value: 40,
                name: '水文传感器',
                itemStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,  color: 'rgba(172,133,236,1)'  // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(199,167,253,1)' //   0% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                title: {
                    offsetCenter: ['180%', '-55%']
                },
                detail: {
                    offsetCenter: ['180%', '-28%']
                }
            },
            {
                value: 60,
                name: '风力传感器',
                itemStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,  color: 'rgba(251,248,22,1)'  // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(225,225,0,1)' //   0% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                title: {
                    offsetCenter: ['180%', '5%']
                },
                detail: {
                    offsetCenter: ['180%', '32%']
                }
            },
            {
                value: 80,
                name: '精力传感器',
                itemStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,  color: 'rgba(122,211,64,1)'  // 100% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(179,241,149,1)' //   0% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                title: {
                    offsetCenter: ['180%', '65%']
                },
                detail: {
                    offsetCenter: ['180%', '90%']
                }
            }
        ],
        title: {
            fontSize: 12,
            color: '#ffffff'
        },
        detail: {
            width: 50,
            height: 8,
            fontSize: 11,
            color: '#ffffff',
            borderColor: 'auto',
            borderRadius: 20,
            borderWidth: 1,
            formatter: '{value}'
        }
    }]
};

if (myChartsThirOpt && typeof myChartsThirOpt === 'object'){
    myChartsThir.setOption(myChartsThirOpt);
}
setInterval(function () {
    // myChartsThirOpt.series[0].pointer.show = true;
    myChartsThirOpt.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChartsThirOpt.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
    myChartsThirOpt.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
    myChartsThirOpt.series[0].data[3].value = (Math.random() * 100).toFixed(2) - 0;
    myChartsThir.setOption(myChartsThirOpt, true);
}, 5000);

